<template>
  <div class="dashbord">
    <div class="dashbord-content">
      <img class="bg-img" src="../../assets/bg.png" alt="" srcset="" />

      <div class="logo">
        <img class="logo-img" src="../../assets/logo.png" alt="" srcset="" />
        <div class="logo-text">运天下</div>
      </div>
    </div>

    <div class="dashbord-btns">
      <div class="dashbord-btn" @click.stop="toHuozhu">
        <span>下载货主端</span>
      </div>

      <div class="dashbord-btn" @click.stop="toSiji">
        <span>下载司机端</span>
      </div>
    </div>

    <div class="dashbord-mask" v-if="isWeixin()">
      <div class="img-wrapper">
        <img src="../../assets/1.png" alt="" />
        <img src="../../assets/2.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';

const isWeixin = () => {
  var ua = window.navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) || ua.match(/_SQ_/i)) {
    return true;
  } else {
    return false;
  }
};

const router = useRouter();
const toHuozhu = () => {
  router.push('/home/dashboard-huozhu');
};
const toSiji = () => {
  router.push('/home/dashboard-siji');
};
</script>

<style lang="less" scoped>
.dashbord {
  min-height: 100vh;
  background: #f7f7f7;

  .bg-img {
    width: 100vw;
  }
  .logo {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);

    &-img {
      width: 60px;
    }

    &-text {
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      font-weight: normal;
      text-align: center;
      margin-top: 6px;
      color: #333333;
    }
  }
  .dashbord-btns {
    color: #ff6000;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 140px;
    width: 50%;
    justify-content: space-around;
    align-items: center;
    margin: 30px auto;

    img {
      width: 22px;
      margin-right: 12px;
    }
    font-size: 16px;
  }
  .dashbord-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 45px;
    border-radius: 30px;
    box-sizing: border-box;
    border: solid #ff6000 1px;
    justify-content: center;
  }
}
.dashbord-content {
  position: relative;
}
.dashbord-mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  .img-wrapper {
    position: absolute;
    top: 100px;
    right: 30px;
    display: flex;
    flex-direction: column;
    img {
      margin-bottom: 20px;
      width: 200px;
    }
  }
}
</style>
